<!DOCTYPE html>
<html>
<head>
 	<meta charset="utf-8">
	<title>公司名称</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="top">
	<p class="gong">公司名称</p>
	<ul>
		<li>
			<a href="#" >网站首页
			<div id="sk"></div>
			</a>
			
		</li>
		<li>
			<a href="#" >关于我们
				<div id="sk"></div>
			</a>
			
		</li>
		<li>
			<a href="#">产品展示<div id="sk"></div></a>
			
		</li>
		<li>
			<a href="#">防爆小常识<div id="sk"></div></a>
			
		</li>
		<li>
			<a href="#">新闻中心<div id="sk"></div></a>
		<li>
			<a href="#">诚聘英才<div id="sk"></div></a>
		</li>
		<li>
			<a href="#">在线留言<div id="sk"></div></a>
		</li>
		<li class="last">
			<a href="#">联系我们<div id="sk"></div></a>
		</li>
	</ul>
</div>
<div class="center">
	<div class="center_1">
		<ul>
			<li>
				<a href="#"><img src="images/p1_07.png">
				<p>防爆电器</p></a>
			</li>
			<li>
				<a href="#"><img src="images/p2_07.png">
				<p>防爆灯具</p></a>
			</li>
			<li>
				<a href="#"><img src="images/p3_03.png">
				<p>防爆仪表</p></a>
			</li>
			<li>
				<a href="#"><img src="images/p4_07.png">
				<p>三防系列</p></a>
			</li>
			<li>
				<a href="#"><img src="images/p5_07.png">
				<p>船用防爆</p></a>
			</li>
			<li class='A_3'>
				<a href="#"><img src="images/p6_07.png">
				<p>塑胶产品</p></a>
			</li>
			<li class="A_2">
				<a href="#"><img src="images/p7_07.png">
				<p>光电产品</p></a>
			</li>
			<li class='A_1'>
				<a href="#"><img src="images/p8_07.png">
				<p>自动化</p></a>
			</li>
		</ul>
	</div>
	<div class="center_2">
		<div class="left">
			<img src="images/btn_1.png">
		</div>
		<div class="middle">
			<ul>
				<li>
					<div class="Img">
						<a href="#"><img src="images/c7.png">
						<p>EX 防爆元件</p></a>
					</div>
				</li>
				
				<li>
					<div class="Img">
						<a href="#"><img src="images/c1.png">
						<p>EX 防爆元件</p></a>
					</div>
				</li>
				<li>
					<div class="Img">
						<a href="#"><img src="images/c2.png">
						<p>EX 防爆元件</p></a>
					</div>
				</li>
				<li>
					<div class="Img">
						<a href="#"><img src="images/c3.png">
						<p>EX 防爆元件</p></a>
					</div>
				</li>
				<li>
					<div class="Img">
						<a href="#"><img src="images/c4.png">
						<p>EX 防爆元件</p></a>
					</div>
				</li>
				<li>
					<div class="Img">
						<a href="#"><img src="images/c5.png">
						<p>EX 防爆元件</p></a>
					</div>
				</li>
				<li>
					<div class="Img">
						<a href="#"><img src="images/c6.png">
						<p>EX 防爆元件</p></a>
					</div>
				</li>
				<li>
					<div class="Img">
						<a href="#"><img src="images/c7.png">
						<p>EX 防爆元件</p></a>
					</div>
				</li>
				<li>
					<div class="Img">
						<a href="#"><img src="images/c1.png">
						<p>EX 防爆元件</p></a>
					</div>
				</li>
				<li>
					<div class="Img">
						<a href="#"><img src="images/c2.png">
						<p>EX 防爆元件</p></a>
					</div>
				</li>
				<li>
					<div class="Img">
						<a href="#"><img src="images/c3.png">
						<p>EX 防爆元件</p></a>
					</div>
				</li>
				<li>
					<div class="Img">
						<a href="#"><img src="images/c4.png">
						<p>EX 防爆元件</p></a>
					</div>
				</li>
				<li>
					<div class="Img">
						<a href="#"><img src="images/c5.png">
						<p>EX 防爆元件</p></a>
					</div>
				</li>
				<li>
					<div class="Img">
						<a href="#"><img src="images/c6.png">
						<p>EX 防爆元件</p></a>
					</div>
				</li>
				<li>
					<div class="Img">
						<a href="#"><img src="images/c7.png">
						<p>EX 防爆元件</p></a>
					</div>
				</li>
				<li>
					<div class="Img">
						<a href="#"><img src="images/c1.png">
						<p>EX 防爆元件</p></a>
					</div>
				</li>
			</ul>
		</div>
		<div class="right">
			<img src="images/btn_2.png">
		</div>
	</div>
	<div class="center_3">
		<div class="center_3_1">
			<div class="xin">
				<div class='xin_1'>
					<ul>
						<li class="Li">
							<p class="first">新闻中心</p>
							<a href="#"><span class="fir">>>MORE</span</a>
						</li>
						<li>
							<a href="#"><p>防爆外贸市场增长近两成...</p></a>
							<span>[2015/11/14]</span>
						</li>
						<li>
							<a href="#"><p>防爆科技园生产基地开工...</p></a>
							<span>[2015/11/14]</span>
						</li>
						<li>
							<a href="#"><p>石化行业捷报频传:接连...</p></a>
							<span>[2015/11/14]</span>
						</li>
						<li>
							<a href="#"><p>防爆科技园生产基地开工...</p></a>
							<span>[2015/11/14]</span>
						</li>

					</ul>
				</div>
			</div>
		</div>
		<div class="center_3_2">
			<div class="gy">
				<div class="gy_1">
					<p>关于华荣</p>
					<a href="#"><span>>>MORE</span></a>
				</div>
				<div class="gy_2">
					<a href="#"><img src="images/c_1_11.png"></a>
					<p>公司名称公司有限公司是一家专业的防爆电气产品制造商，拥有国内一流的生产技术水平和开发能力......</p>
				</div>
			</div>
			<div class="lx">
				<div class="lx_1">
					<img src="images/c_2_11.png">
					<p class="lw">联系我们</p>
					<p class="gs">公司名称</p>
					<p>公司地址：公司地址</p>
					<p>联系电话：1309****</p>
					<p>公司邮箱：zg***@126.com</p>
				</div>
			</div>
		</div>
	</div>
	<div class="cen_footer">
		<p>© 版权所有  粤ICP519903254 技术支持</p>
		<div class="inp">
			<select class="xla_1">
				<option value='合作伙伴'>合作伙伴</option>
				<option value='合作伙伴1'>合作伙伴1</option>
				<option value='合作伙伴2'>合作伙伴2</option>
			</select>
			<select class="xla_1">
				<option value='友情链接'>友情链接</option>
				<option value='友情链接1'>友情链接1</option>
				<option value='友情链接2'>友情链2</option>
			</select>
		</div>
	</div>
</div>
</body>
<script src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
	var index=1;
	$('.center .center_2 .left img').click(function(){
		index++;
		if(index>7)
		{
			index=1;
			$('ul').css({left:'0'});
		}
		play();
	})
	$('.center .center_2 .right img').click(function(){
		index--;
		if(index<1)
		{
			index=7;
			$('ul').css({left:-162*8+'px'});
		}
		play();
	})
	function play(){
		$('.center .center_2 .middle ul').animate({left:-162*index+'px'},500);
	}
	setInterval(function(){
		index++;
		if(index>7){
			index=1;
			$("ul").css({left:"0"});
		}
		play();
	},2500)
</script>
</html>